<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib prefix="spring" 	uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="tiles" 	uri="http://tiles.apache.org/tags-tiles" %>
<%@ taglib prefix="c"		uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" 	uri="http://www.springframework.org/tags/form" %>
<%@ page contentType="text/html; charset=utf-8" %>
<%@ page language="java" pageEncoding="utf-8"%>

<script type="text/javascript">

var validator, status;	

$(document).ready(function(){
	setMenuSelection("personal");
	
    $("#tabPersonalCard").kendoTabStrip({
        animation:  {
            open: {
                effects: "fadeIn"
            }
        }
    });	  
    
    $("#pSex").kendoDropDownList();
    $("#pActive").kendoDropDownList();
    $("#pRefBranch").kendoDropDownList();
    $("#pRefRole").kendoDropDownList();
    $("#pRefRegion").kendoDropDownList({
    	change        : onSelectRegion
    });
    $("#pRefCityHall").kendoDropDownList();
    
    var regionsCB = $("#pRefRegion").data("kendoDropDownList");

    if(regionsCB.value()!=null){
    	$("#pRefCityHall").kendoDropDownList({dataSource: {
            type: "json",
            transport: {
                read: {
               	 url: "json/listRefCityHallsByRegionCBX",
               	 data: { id: regionsCB.value() }
                }
            }
        },
        index: -1,
    	 value: "",
        dataTextField: "mdValue",
        dataValueField: "id",
        placeholder: " - Selectaţi - "
        });
    }

    
    
    $("#pBirthDate").kendoDatePicker({
   	 format: "dd.MM.yyyy"
   });
    
    $("#btPersonalList").kendoButton({
        icon: "funnel"
    });

    $("#btPersonalCard").kendoButton({
        icon: "plus"
    });
    
    $("#btPersonalCardSubmit").kendoButton({
        icon: "tick"
    });

    $("#btPersonalCardReset").kendoButton({
        icon: "cancel"
    });
    
    $("#btPersonalCardApply").kendoButton({
        icon: "custom"
    });
 
	$('#btEditFoto').on('click', function () {
		 var form = new FormData(document.getElementById('idUploadUserFotoForm'));
		 form.append( 'file', $( '#idUserFotoFile' )[0].files[0] );
		 $.ajax({
		  url: "f/uploadImage",
		  data: form,
		  dataType: 'text',
		  processData: false,
		  contentType: false,
		  type: 'POST',
		  success: function (response) {
		      var data = jQuery.parseJSON(response);   
		      $('#pFotoId').val(data.id);
		      $("#pUserFoto").attr('src', "f/downlodFileById?pId="+data.id);
		  },
		  error: function (jqXHR) {
		   //Error handling
		  }
		 });
		});    
  
	$('#btEditPano').on('click', function () {
		 var form = new FormData(document.getElementById('idUploadPanoFotoForm'));
		 form.append( 'file', $( '#idPanoFile' )[0].files[0] );
		 $.ajax({
		  url: "f/uploadImage",
		  data: form,
		  dataType: 'text',
		  processData: false,
		  contentType: false,
		  type: 'POST',
		  success: function (response) {
		      var data = jQuery.parseJSON(response);   
		      $('#pPanoId').val(data.id);
		      $("#pPanoFoto").attr('src', "f/downlodFileById?pId="+data.id);
		  },
		  error: function (jqXHR) {
		   //Error handling
		  }
		 });
		});  
	
	
	 validator = $("#formPersonalCard").kendoValidator().data("kendoValidator");
     status = 	$(".status");
	
});


function SubmitFormPersonalCard(pPostOperation){
	
	 if (validator.validate()) {
		 console.log("Form Is OK");
         //status.text("Hooray! Your tickets has been booked!").removeClass("invalid").addClass("valid");
		var formAction = $("#formPersonalCard").attr( 'action' );
		$("#formPersonalCard").attr('action', formAction + '?pPostOperation='+pPostOperation);
		$("#formPersonalCard").submit();
		
     } else {
         //status.text("Oops! There is invalid data in the form.").removeClass("valid").addClass("invalid");
         $("#validationErrorMessage").text("Nu sunt completate toate cimpurile! Verificati!");
    	 console.log("Form Is BAD");
     }
}

function DeleteUserFoto(){
	$("#pUserFoto").attr('src', "f/downlodFileById?pId=0");
	$("#pFotoId").val("0");
}

function DeletePanoFoto(){
	$("#pPanoFoto").attr('src', "f/downlodFileById?pId=0");
	$("#pPanoId").val("0");
}

function onSelectRegion(e) {
    //alert(this.value());
    
    $("#pRefCityHall").kendoDropDownList({dataSource: {
        type: "json",
        transport: {
            read: {
           	 url: "json/listRefCityHallsByRegionCBX",
           	 data: { id: this.value() }
            }
        }
    },
    index: -1,
	 value: "",
    dataTextField: "mdValue",
    dataValueField: "id",
    placeholder: " - Selectaţi - "
    });
}

</script>

<CENTER>
<p style="text-align: left;">
	<button id="btPersonalList" type="button" onclick="javascript:window.open('vizualizeazaPersonal', 	target='_self')";>	Lista persoanal</button>
	<button id="btPersonalCard" type="button" onclick="javascript:window.open('adaugaPersonal', 		target='_self')";>	Adaugă persoanal</button>
	<c:if test="${errorMessage != '' &&  errorMessage != '0'}">
		<span id="errorMessage" class="errorMessage"> ${errorMessage} </span>
	</c:if>
	
</p>
<form:form id="formPersonalCard" method="post" commandName="personalItem" action="adaugaPersonal">
<div id="tabPersonalCard" style="text-align: left;" >
	<ul>
	    <li class="k-state-active">
	              Date personale
	    </li>
		<li>
	              Date pentru acces
	    </li>
		<li>
	              Adresa şi datele de contact
	    </li>
		<li>
	              Primar
	    </li>	    	
	    <li>
	    		Setează comisioane pentru personal 
	    </li>   	    
	</ul> 
	<div>
			<div class="k-block k-shadow">
<!-- 			 Date personale -->
				<TABLE >
				<TR><TD width="220px">
					<DIV align="left" style="width: 220px; display: inline-block;">
						<IMG id="pUserFoto" alt="Foto Utilizator" src="f/downlodFileById?pId=${personalItem.fotoId}" align="left" style="max-width: 205px; max-height: 255px;" />
					</DIV>
				</TD>
				<TD align="left">
					<DIV align="left">
					<ul class="forms" style="font-size: 14px;">
						<form:hidden id="pId" path="id" name="id"/>
						<form:hidden id="pFotoId" path="fotoId" name="fotoId"/>
						<li>
							<label  for="pIdno" class="required">Cod personal: </label> 		
								<form:input type="text" id="pIdnp" 	 		path="idnp"  		name="idnp" 	maxlength="13" style="width:150px;" class="k-textbox" required="true"/> 
						</li><li>
							<label  for="pLastName" class="required">Nume: </label> 			
								<form:input type="text" id="pLastName" 		path="lastName"  	name="lastName" style="width:250px;"  class="k-textbox"  required="true"/>
						</li><li>
							<label  for="pFirstName" class="required">Prenume: </label> 		
								<form:input type="text" id="pFirstName" 	path="firstName" 	name="firstName" style="width:250px;"  class="k-textbox"  required="true"/>
						</li><li>							  
							<label  for="pPatronymic" >Patronimic:  </label> 	
								<form:input type="text" id="pPatronymic" 	path="patronymic"  	name="patronymic" style="width:250px;"  class="k-textbox"  /> 
						</li><li>
							<label  for="pBirthDate" class="required">Ziua de naştere:  </label>
								<form:input 				id="pBirthDate" path="birthDate"  	name="birthDate"  style="width:150px;"  class="k-textbox"  required="true"/>
						</li><li>
							<label  for="pSex" class="required">Sex:  </label>
							<form:select id="pSex" path="sex" name="sex" style="width:200px;" >
							 	<form:option value="M" 		label="Masculin">				</form:option>
							 	<form:option value="F" 		label="Feminin">				</form:option> 
		   					</form:select>	
						</li><li>							
							<label  for="pNotes" >Commentariu:  </label> 						
								<form:textarea type="text" id="pNotes" 		path="notes"  		name="notes" 		style="width:250px;"  class="k-textbox"  ></form:textarea> 
						</li>    					
					</ul>	
					</DIV>
				</TD></TR>
				</TABLE>
			</div>
			
			<p style="text-align: left;">
				<button id="btDeleteFoto"		type="button" onclick="DeleteUserFoto();" 	>Sterge Foto	</button>
				<button id="btEditFoto" 		type="button" 	>Incarca Foto	</button>
				<input id="idUserFotoFile" 			type="file" name="fileFormName" style="height: 20px" />
			</p>				
	</div>
	<div>
		<div class="k-block k-shadow">
<!-- 		Date pentru acces -->
			<ul class="forms" style="font-size: 14px;">		
				<li>
					<label  for="pUserLogin" class="required">Login: </label> 		
						<form:input type="text" id="pUserLogin" 		path="userLogin"  	name="userLogin" style="width:250px;"  class="k-textbox"  required="true"/>
				</li><li>
					<label  for="pUserPassword" class="required">Parola: </label> 	
						<form:input type="text" id="pUserPassword" 		path="userPassword"  	name="userPassword" style="width:250px;"  class="k-textbox"  required="true"/>
				</li>
				<li>
					<label  for="pActive" class="required">Activ: </label>
<%-- 					<form:input type="text" id="pActive" 		path="active"  	name="active" style="width:250px;"  class="k-textbox"  required="true"  /> --%>
 	
 					<form:select id="pActive" path="active" name="active" style="width:250px;"  >
								<option 	 value="" 	label=" - Selectati - " >		</option>
							 	<form:option value="1" 		label="Activ">				</form:option>
							 	<form:option value="0" 		label="Deactivat">			</form:option> 
		   			</form:select>	
				</li>
				<li>	
					<label  for="pRefBranch"  class="required">Filiala :   </label> 
					<form:select id="pRefBranch" path="refBranch.id" style="width:300px;" required="true"  data-required-msg="Selectati Filiala" >
						<option value="" label=" - Selectati - " ></option>
	     					<form:options items="${refBranchCBX}" itemValue="id" itemLabel="mdValue"/>
	   				</form:select>					
				</li>
				<li>	
					<label  for="pRefRole"  class="required">Rolul :   </label> 
					<form:select id="pRefRole" path="refRole.id" style="width:300px;" required="true"  data-required-msg="Selectati Rolul" >
						<option value="" label=" - Selectati - " ></option>
	     					<form:options items="${refRoleCBX}" itemValue="id" itemLabel="mdValue"/>
	   				</form:select>					
				</li>				
			</ul>
		</div>
	</div>
	<div>
		<div class="k-block k-shadow">
<!-- 		Adresa şi datele de contact -->
			<ul class="forms" style="font-size: 14px;">
				<li>	
					<label  for="pRefRegion" class="required">Region :   </label> 
					<form:select id="pRefRegion" path="refRegion.id" style="width:300px;"  required="true" data-required-msg="Selectati Region">
						<option value="" label=" - Selectati - " ></option>
	     					<form:options items="${refRegionsCBX}" itemValue="id" itemLabel="mdValue"/>
	   				</form:select>					
				</li>
				<li>	
					<label  for="pRefCityHall" class="required">Primarie/Pretura :   </label> 
					<form:select id="pRefCityHall" path="refCityHall.id" style="width:300px;" required="true" data-required-msg="Selectati Primaria/Pretura">
						<option value="" label=" - Selectati - " ></option>
	     					<form:options items="${refCityHallsCBX}" itemValue="id" itemLabel="mdValue"/>
	   				</form:select>					
				</li>
				<li>							
					<label  for="pAddress" >Adresa:  </label> 			
						<form:textarea  type="text" id="pAddress" 	path="address"  	name="address" style="width:250px;"  class="k-textbox"  ></form:textarea> 
				</li><li>							
					<label  for="pPhoneHome" >Tel. acasa:  </label> 					<form:input type="text" id="pPhoneHome" 	path="phoneHome"  	name="phoneHome" 	style="width:150px;"  class="k-textbox"  /> 
				</li><li>							
					<label  for="pPhoneServ" >Tel. serviciu:  </label> 					<form:input type="text" id="pPhoneServ" 	path="phoneServ"  	name="phoneServ" 	style="width:150px;"  class="k-textbox"  />
				</li><li>							
					<label  for="pPhoneMob" >Tel. mobil:  </label> 						<form:input type="text" id="pPhoneMob" 		path="phoneMob"  	name="phoneMob" 	style="width:150px;"  class="k-textbox"  />										
				</li><li>							
					<label  for="pEmal" >E-mail:  </label> 								<form:input type="text" id="pEmal" 			path="emal"  		name="emal" 		style="width:150px;"  class="k-textbox"  /> 
				</li><li>							
					<label  for="pSkype" >Messenger:  </label> 							<form:input type="text" id="pSkype" 		path="skype"  		name="skype" 		style="width:150px;"  class="k-textbox"  /> 
				</li>
			</ul>
		</div>		
	</div>
	<div>
		<div class="k-block k-shadow">
<!-- 		Primaria -->	
			<form:hidden id="pPanoId" path="panoId" name="panoId"/>	
			<TABLE >
				<TR><TD width="220px">
						<DIV align="left" style="width: 220px; display: inline-block;">
							<IMG id="pPanoFoto" alt="Foto Panoului" src="f/downlodFileById?pId=${personalItem.panoId}" align="left" style="max-width: 205px; max-height: 255px;" />
						</DIV>
					</TD>
					<TD align="left">
						<DIV align="left">
							<ul class="forms" style="font-size: 14px;">
				
								<li>							
									<label  for="pPrimarName" >Nume, Prenume :  </label><form:input type="text" id="pPrimarName" 	path="primarName"  	name="primarName" 	style="width:250px;"  class="k-textbox"  />										
								</li><li>							
									<label  for="pPrimarTel" >Tel. de contact:  </label><form:input type="text" id="pPrimarTel" 	path="primarTel"  	name="primarTel" 	style="width:250px;"  class="k-textbox"  />
								</li><li>							
									<label  for="pPrimarEmail" >E-mail:  </label> 		<form:input type="text" id="pPrimarEmail" 	path="primarEmail"  name="primarEmail" 	style="width:250px;"  class="k-textbox"  /> 
								</li>
							</ul>
						</DIV>
					</TD></TR>
			</TABLE>
		</div>
		<p style="text-align: left;">
				<button id="btDeletePano"		type="button" onclick="DeletePanoFoto();" 	>Sterge Foto	</button>
				<button id="btEditPano" 		type="button" 	>Incarca Foto	</button>
				<input id="idPanoFile" 			type="file" name="fileFormName" style="height: 20px" />
		</p>	
	</div>	
	<div>
<!-- 		Setează comisioane pentru personal -->
		<div class="k-block k-shadow">
		
		
		
			
						<table border="0px">
						    <tr>
						    	<th align="right">Domeniu</th>
						        <th align="right">Servicii</th>
						        <th align="right">Procent</th>
						    </tr>
						    <c:forEach items="${personalItem.secUserProcentDetail}" var="app" varStatus="status">
						        <tr>
						            <td><label  for="app${status.index}.value">${app.refServices.refDomains.mdValue}</label></td>
						            <td><label  for="app${status.index}.value">${app.refServices.mdValue}</label>			</td>  
						            <td>
						            
						            	<form:hidden id="app${status.index}.id" 					path="secUserProcentDetail[${status.index}].id" 	/>
						            	<form:hidden id="app${status.index}.refServices.id" 		path="secUserProcentDetail[${status.index}].refServices.id" 	/>
						            	
						            	<form:input  id="app${status.index}.procent"  			
						            				path="secUserProcentDetail[${status.index}].procent"  
						            				style="width:40px;"  class="k-textbox"/>
						            	
						            	<form:hidden id="app${status.index}.visualOrder" 		path="secUserProcentDetail[${status.index}].visualOrder" 	/>
						            </td>
						        </tr>
						    </c:forEach>
						</table>
			
		
		
		</div>
	</div>		
</div>
<p style="text-align: right;">
 	<span id="validationErrorMessage" class="status" style="color: red; float: left;"></span>
	<button id="btPersonalCardApply"		type="button" onclick="SubmitFormPersonalCard('remain')" 	>Aplică</button>
	<button id="btPersonalCardSubmit" 		type="button" onclick="SubmitFormPersonalCard('close')"  >Salvează</button>
	<button id="btPersonalCardReset" 		type="reset"  onclick="javascript: window.history.back();">Anulează</button>
</p> 		
</form:form> 

<form id="idUploadUserFotoForm" enctype="multipart/form-data">
					
</form>
    
<form id="idUploadPanoFotoForm" enctype="multipart/form-data">
					
</form>    
    
</CENTER>
<style scoped>
     #formPersonalCard ul {
         list-style-type: none;
         margin: 0;
         padding: 0;
     }
     #formPersonalCard li {
         margin: 10px 0 0 0;
     }

     label {
         display: inline-block;
         width: 300px;
         text-align: right;
     }
     
     input {
     	height: 10px;
     }

     .required {
         font-weight: bold;
     }

     .accept, .status {
         padding-left: 90px;
     }

     .valid {
         color: green;
     }

     .invalid {
         color: red;
     }
     span.k-tooltip {
         margin-left: 6px;
     }
 </style>



